import React, { Component } from 'react';
import { getCurrentInstance } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components'
import './index.scss'
import { staticUrl } from '@/utils'

const Empty = staticUrl('/img/user/adviser-icon-empty.png')

interface State {
  val: object
}

export default class Index extends Component {
  $instance = getCurrentInstance();
  constructor (props) {
    super(props)
    this.state = {
      val: {},// 详情信息
    }
  }

  state: State

  UNSAFE_componentWillMount() { }
  componentDidMount() {
    const { val } = this.$instance.router.params
    this.setState({
      val: JSON.parse(val)
    })
  }
  UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() { }

  // 设置时间格式
  dateFormat(val) {
    const time = new Date(Number(val + '000'))
    return `${time.getFullYear()}年${this.completion(time.getMonth() + 1)}月${this.completion(time.getDate())}日`
  }

  //补0
  completion(val) {
    if (val < 10) {
      return '0' + val
    } else {
      return val
    }
  }

  render() {
    const { val } = this.state;
    console.log('val: ', val);
    return (
      <View className="body" >
        <View className="head">
          {
            val.image ? <Image className="head-goods-img" src={val.image} /> :
              <View className="head-nothing">
                <Image className="head-nothing-img" src={Empty} />
                <View className="head-nothing-text">暂无图片</View>
              </View>
          }
        </View>
        <View className="title">{val.goodsName}</View>
        <View className="detail">
          服务方案：
              <Text className="detail-text">{val.orderNumber}</Text>
        </View>
        <View className="detail">
          施工日期：
              <Text className="detail-text">{this.dateFormat(val.finishOrderAt)}</Text>
        </View>
        <View className="detail">
          服务车辆：
              <Text className="detail-text">{val.carLicense}</Text>
        </View>
        <View className="detail">
          施工门店：
              <Text className="detail-text">{val.storeName}</Text>
        </View>
        {
          // 施工日期和质保有效期相同不显示
          val.finishOrderAt && val.warrantyValidAt && (val.finishOrderAt != val.warrantyValidAt) && (
            <View className="detail">
              质保有效期：
              <Text className="detail-text">{this.dateFormat(val.warrantyValidAt)}</Text>
            </View>
          )
        }
        {
          val.distance && val.distance > 0 ? (
            <View className="detail">
              质保里程数：
              <Text className="detail-text">{val.distance}公里</Text>
            </View>
          ) : null
        }
      </View>
    )
  }
}
